<template>
  <div id="all">
    <div class="all-content">
      <!-- 详情页 -->
      <div class="right-content" v-if="isSpecial == 0" v-loading="loading">
        <div class="new">我关注的标签</div>
        <div class="tagArticle">标签文章</div>
        <div v-if="res.articleShow" v-loading="loading">
          <div class="article" v-for="(item, index) in artList" :key="index">
            <div class="article-top">
              <div class="headerCtn">
                <div class="article-header" @click="goUp(item.articleUserid)">
                  <img :src="item.headImage" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 1">
                  <img src="../assets/imgs/xhv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 2">
                  <img src="../assets/imgs/xlv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 3">
                  <img src="../assets/imgs/green.png" alt />
                </div>
              </div>
              <div class="article-right">
                <div class="article-name">
                  <span>{{ item.nickName }}</span>
                  <div class="stars">
                    <div
                      class="singleStar"
                      v-for="itemStar in item.stars"
                      :key="itemStar"
                    >
                      <img src="../assets/imgs/hb.png" alt />
                    </div>
                  </div>
                </div>
                <div class="article-date">{{ item.updateTime }}</div>
              </div>
              <div class="collect" @click="showCollect(item.articleId)">
                <img src="../assets/imgs/collect.png" alt />
              </div>
              <div
                class="collectModal"
                v-if="item.showCollect"
                @click="collect(item.articleId)"
              >
                <span v-if="item.isCollect == 0">添加到收藏</span>
                <span v-else>取消收藏</span>
              </div>
            </div>
            <div class="small-content">
              <div
                class="content-top"
                @click="jumpPage('artDetail', item.articleId)"
              >
                <div class="article-title">{{ item.articleTitle }}</div>
                <div class="article-content">{{ item.articleContent }}</div>
              </div>
              <viewer class="article-pic" v-if="item.show" :images="item.pic">
                <img
                  class="single-pic"
                  v-for="itemSon in item.pic"
                  :key="itemSon.index"
                  :src="itemSon"
                />
              </viewer>

              <div class="TagCtn">
                <div class="articleTag TagModule">#{{ item.interest }}</div>
                <div class="articleTag" v-if="item.showTalk">
                  #{{ item.talk }}
                </div>
              </div>
              <div class="article-btn">
                <div
                  class="btn-single"
                  @click="getFavor(item.articleId, item.articleUserid)"
                >
                  <div class="btn-icon cupIcon">
                    <img src="../assets/imgs/dz.png" v-if="item.isPoint == 0" />
                    <img src="../assets/imgs/hz.png" v-else />
                  </div>
                  <div class="btn-number">{{ item.pointCount }}</div>
                </div>
                <div
                  class="btn-single"
                  @click="jumpPage('artDetail', item.articleId)"
                >
                  <div class="btn-icon detail">
                    <img src="../assets/imgs/hf.png" />
                  </div>
                  <div class="btn-number">{{ item.commentCount }}</div>
                </div>
                <div class="btn-single" @click="forwardBtn(item.articleId)">
                  <div class="btn-icon zhuanfa">
                    <img src="../assets/imgs/zf.png" />
                  </div>
                  <div class="btn-number">{{ item.forwardCount }}</div>
                </div>
                <div class="btn-single btnFx">
                  <Copy :artId="item.articleId"></Copy>
                </div>
                <div class="reportBtn" @click="showReport(item.articleId)">
                  <div class="reportIcon">
                    <img src="../assets/imgs/jubaoIcon.png" alt />
                  </div>
                  <span class="reportText">举报</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="article noList" v-else>当前还没有内容哦~</div>
      </div>
      <!-- 列表页 -->
      <div class="right-content" v-if="isSpecial == 1">
        <div class="new">我关注的标签</div>
        <div class="tagCtn" v-if="artList.length != 0" v-loading="loading">
          <div
            class="tag"
            v-for="(item, index) in artList"
            :key="index"
            @click="tagDetail(item.talkContent)"
          >
            #{{ item.talkContent }}
          </div>
        </div>
        <div class="tagCtn noList" v-else>暂时没有内容哦</div>
      </div>
    </div>
    <div class="paging" v-if="artList.length != 0 && isSpecial == 0">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="3"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <div class="paging" v-if="artList.length != 0 && isSpecial == 1">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="7"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <Report ref="report" :reportId="reportId"></Report>
  </div>
</template>
<script>
import Copy from "../components/Copy";
import Report from "../components/Report";
export default {
  props: {
    refresh: {
      type: Boolean,
    },
  },
  data() {
    return {
      index: "index",
      loading: true,
      interList: [],
      defaultIndex: 0,
      ctnIndex: 0,
      isQuestion: false,
      user: "",
      artList: [],
      list: "",
      isSpecial: 1,
      res: "",
      collectModal: false,
      totalPage: 0,
      currentPage: 1,
      count: 0,
      sonPage: 1,
      concernIndex: 0,
      listId: 0,
      modalType: 0,
      talk: "",
      reportId: 0,

      isShow: "",
    };
  },
  watch: {
    refresh: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.concernTag(1);
        }
      },
    },
  },
  components: {
    Copy,
    Report,
  },
  created() {
    this.concernTag(1);
  },
  mounted() {
    this.getRem(1920, 100);
  },
  methods: {
    init(url, listName, page, talk) {
      this.loading = true;
      this.$fetch(`${url}?page=${page}&limit=3&talk=${talk}`, {}).then(
        (res) => {
          this.loading = false;
          this.totalPage = res.totalPages * 1;
          this.count = res.count * 1;
          this.res = res;
          this.$set(res, "articleShow", true);
          this.artList = res[listName];
          //处理图片为空的样式
          for (let i of this.artList.keys()) {
            this.$set(this.artList[i], "show", true);
            if (this.artList[i].articlePicture == "") {
              this.$set(this.artList[i], "show", false);
            }
            //处理图片数组
            let picArray = [];
            if (this.artList[i].articlePicture != void 0) {
              picArray = this.artList[i].articlePicture
                .split(",")
                .filter((e) => e);
              this.$set(this.artList[i], "pic", picArray);
            }

            //处理星星数组
            let len = this.artList[i].award + 1;
            let stars = [];
            stars.length = len;
            this.$set(this.artList[i], "stars", stars);
            //处理收藏模态窗
            this.$set(this.artList[i], "showCollect", false);
            //处理talk为空的情况
            this.$set(this.artList[i], "showTalk", true);
            if (this.artList[i].talk == null) {
              this.$set(this.artList[i], "showTalk", false);
            }
          }
          //list为空的样式处理
          if (this.artList.length == 0) {
            this.$set(res, "articleShow", false);
          }
          console.log(this.artList);
        }
      );
    },
    showReport(id) {
      this.reportId = id;
      this.$refs.report.clear();
    },
    //加载关注的标签列表
    async concernTag(page) {
      this.loading = true;
      const res = await this.$post(
        `/laiwen/talk/frontend/tlist?page=${page}&limit=7`
      );
      this.loading = false;
      this.artList = res.list;
      this.totalPage = res.totalPages * 1;
      this.count = res.count * 1;
      console.log(this.count);
      this.res = res;
      this.isSpecial = 1;
    },
    //详情文章
    tagDetail(talk) {
      this.isSpecial = 0;
      this.talk = talk;
      this.isShow = false;
      this.init(`/laiwen/talk/frontend/alist/`, "list", 1, talk);
    },
    //展示收藏的模态窗
    showCollect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      res.showCollect = !res.showCollect;
    },

    //收藏
    collect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      this.showCollect(id);
      let collect = {};
      this.$set(collect, "getCollectId", res.articleUserid);
      this.$set(collect, "collectPostId", res.articleId);
      this.$post(`/laiwen/collect/frontend/save`, collect).then((val) => {
        if (res.isCollect == 0) {
          res.isCollect = 1;
          this.$message.success("收藏成功");
        } else {
          res.isCollect = 0;
          this.$message("取消收藏");
        }
      });
      console.log(collect);
    },
    //点赞方法
    getFavor(articleId, userId) {
      let that = this;
      let favor = {};
      that.$set(favor, "articleId", articleId);
      that.$set(favor, "getPointId", userId);
      that.$post("/laiwen/point/frontend/save", favor).then((res) => {
        for (let i of that.artList.keys()) {
          if (articleId == that.artList[i].articleId) {
            if (that.artList[i].isPoint == 0) {
              this.$message({
                message: "点赞成功",
                type: "success",
              });
              that.artList[i].isPoint = 1;
              that.artList[i].pointCount += 1;
            } else {
              this.$message("取消点赞");
              that.artList[i].isPoint = 0;
              that.artList[i].pointCount -= 1;
            }
          }
        }
      });
    },

    //跳转页面
    goHtml(e) {
      this.$router.push({
        path: `/${e}`,
      });
    },
    jumpPage(path, id) {
      this.navigate(path, id);
    },

    //Up主页面
    goUp(id) {
      this.$router.push({
        path: "/home",
        query: { id: id },
      });
    },
    //分页方法
    changePage(size) {
      //0是详情页,1是列表页
      console.log(this.isSpecial);
      if (this.isSpecial == 0) {
        this.init(`/laiwen/talk/frontend/alist/`, "list", size, this.talk);
      } else {
        this.concernTag(size);
      }
    },
  },
};
</script>

<style scoped src="../assets/css/ConcernTag.css"></style>
